<template>
    <view class="container">
        <view class="logo">
            <image src="/static/logo.png"></image>
        </view>
        <view class="form">
            <view class="input-group">
                <text class="label">账号</text>
                <input v-model="username" placeholder="请输入账号"></input>
            </view>
            <view class="input-group">
                <text class="label">密码</text>
                <input v-model="password" type="password" placeholder="请输入密码"></input>
            </view>
            <button class="login-btn" @click="login">登录</button>
            <view class="link-group">
                <text @click="toRegister">注册账号</text>
                <text @click="forgetPassword">忘记密码</text>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            username: '',
            password: ''
        }
    },
    methods: {
        login() {
            if (!this.username || !this.password) {
                uni.showToast({
                    title: '账号和密码不能为空',
                    icon: 'none'
                })
                return
            }
            
            uni.showLoading({
                title: '登录中...'
            })
            
            // 模拟登录请求
            setTimeout(() => {
                uni.hideLoading()
                uni.setStorageSync('userInfo', {
                    username: this.username
                })
                uni.showToast({
                    title: '登录成功',
                    icon: 'success'
                })
                uni.switchTab({
                    url: '/pages/index/index'
                })
            }, 1000)
        },
        toRegister() {
            uni.navigateTo({
                url: '/pages/register/register'
            })
        },
        forgetPassword() {
            uni.navigateTo({
                url: '/pages/reset-password/reset-password'
            })
        }
    }
}
</script>

<style>
.container {
    padding: 40rpx;
}
.logo {
    text-align: center;
    margin: 60rpx 0;
}
.logo image {
    width: 200rpx;
    height: 200rpx;
}
.form {
    padding: 0 20rpx;
}
.input-group {
    margin-bottom: 30rpx;
    display: flex;
    align-items: center;
    border-bottom: 1rpx solid #eee;
    padding-bottom: 15rpx;
}
.label {
    width: 120rpx;
    font-size: 28rpx;
}
input {
    flex: 1;
    font-size: 28rpx;
}
.login-btn {
    background-color: #007AFF;
    color: white;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    border-radius: 40rpx;
    margin-top: 60rpx;
    font-size: 32rpx;
}
.link-group {
    display: flex;
    justify-content: space-between;
    margin-top: 30rpx;
}
.link-group text {
    color: #007AFF;
    font-size: 26rpx;
}
</style>    